<template>
  <div class="flex flex-column height order">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      style="border: 1px solid #eee"
      @leftClick="back"
    ></header-top>
    <div class="content">
      <div class="cont">
        <van-radio-group @change="serveDataFn" v-model="radio">
          <div class="list" v-for="(item, index) in information" :key="index">
            <van-swipe-cell>
              <div class="cont_list">
                <div class="cont_info">
                  <div class="cont_name">
                    <van-radio :name="item.id">{{ item.name }}</van-radio>
                  </div>
                  <div class="patient_info">
                    <p>
                      <span v-if="item.sex == 1">男</span>
                      <span v-if="item.sex == 2">女</span>
                      <span v-if="item.sex == 3">未知</span>
                      <i>|</i>
                      <span>{{ item.age }}岁</span>
                      <i>|</i>
                      <span>{{ replaceFn(item.mobile) }}</span>
                    </p>
                  </div>
                </div>
                <!-- <div class="cont_img">
                  <img src="./img/icon_bj.png" />
                </div> -->
              </div>
              <template #right>
                <van-button
                  square
                  type="primary"
                  text="编辑"
                  @click="goNewVisitor(item)"
                />
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                  @click="delect(item.id)"
                />
              </template>
            </van-swipe-cell>
          </div>
        </van-radio-group>
      </div>
    </div>
    <div class="bottom">
      <button class="active" @click="toNewVisitor">新增就诊人</button>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { getPatientList, deletePatient } from "@/api/index";
export default {
  name: "chooseVisitor",
  components: {
    HeaderTop,
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "选择就诊人",
        background: "#fff",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333",
        },
      },
      radio: "",
      information: [],
    };
  },
  created() {
    localStorage.removeItem("patientData");
  },
  mounted() {
    this.getPatientList();
  },
  methods: {
    goNewVisitor(item) {
      this.$router.push({
        path:'/editVisitor',
        query:{information:item}
        })
    },
    delect(id) {
      deletePatient(id).then((res) => {
        this.getPatientList();
      });
    },
    replaceFn(val) {
      return val.replace(/^(\w{3})\w{4}(.*)$/, "$1****$2");
    },
    serveDataFn(val) {
      let arr = [];
      arr = this.information.filter((key) => key.id == val);
      localStorage.setItem("patientData", JSON.stringify(arr[0]));
      this.$router.push("/order");
    },
    getPatientList() {
      let param = {};
      getPatientList(param).then((res) => {
        this.information = res.body;
      });
    },
    back() {
      this.$router.go(-1);
    },
    toNewVisitor() {
      this.$router.push("/newVisitor");
    },
  },
};
</script>
<style scoped>
.order >>> .van-radio__label {
  margin-left: 0.1rem;
  font-size: 0.18rem;
}
</style>
<style lang="less" scoped>
.order {
  .content {
    height: calc(100% - 1.24rem);
    overflow-y: auto;
    background: #fff;
    .cont {
      padding: 0.2rem 0.14rem;
      .list {
        border-bottom: 0.01rem solid #eae9e9;
        padding-bottom: 0.15rem;
        margin-bottom: 0.15rem;
        .cont_list {
          display: flex;
          .cont_info {
            .patient_info {
              padding-top: 0.1rem;
              p {
                span {
                  margin-right: 0.12rem;
                  color: #666;
                }
                i {
                  margin-right: 0.12rem;
                  font-size: 0.1rem;
                  color: #ccc;
                }
              }
            }
          }
          .cont_img {
            margin-left: auto;
            padding-right: 0.1rem;
            img {
              width: 0.2rem;
              background-size: 100%;
            }
          }
        }
      }
    }
  }
  .bottom {
    padding: 0.15rem 0.2rem;
    background: #fff;
    font-size: 0.18rem;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.06);
    button {
      width: 100%;
      height: 0.44rem;
      border: 0;
      border-radius: 0.44rem;
      background: #f5f5f5;
      color: #ccc;
    }
    button.active {
      color: #fff;
      background-image: linear-gradient(to left, #02c0cb, #0adda4);
    }
  }
}
</style>
